

<html>
<head>
    <style>
    
        <!--Esta clase define quién va a ser droppeable, es decir, que puede recibir objetos draggados-->
    	.imk_droppable {
			height: 30px;
		     background: none repeat scroll 0 0;
		     border-top: 2px black;
		     border-bottom: 2px black;
             width: 100px;

		}
		
		
		<!--Esta clase define quién va a ser draggable, es decir, que se puede arrastrar-->
    	
    	.imk_draggable {
			height: 16px;
		     background: none repeat scroll 0 0 #FFFACD !important;
		     border: 2px dashed black;
		     width: 90px;

		}
		
		<!--Este truco se hace para que los DIVs se vean horizontalmente y no se pongan verticalmente.-->
		div.imk_droppable, div.imk_draggable{
		    float: left;
		}

		
		<!--Estilo que se utilizar para cuándo un objeto draggable está siendo arrastrado a un droppable.
		Cuándo se hace el binding con jquery se define el parametro hooverClass, y jquery automáticamente lo asigna-->
		.hovered {
           background: silver;
           background-color:silver;
        }


		<!--Esta clase la coloca jquery para indicar que un objeto draggable está siendo arrastrado.  
		Aquí lo estoy usando para ponerle una sombrita :-) --> 
        div.ui-draggable-dragging {
            -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
            -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
            box-shadow: 0 0 .5em rgba(0, 0, 0, .8);
        }

    </style>



<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script> 
<script type="text/javascript"> 

      
        


		function inicializar(){

		   console.log('cuantos hay para inicializar draggable=' + $('.imk_draggable').size());
		   
		   
		   $('.imk_draggable').draggable({
		        
		        revert: true,
		        cursor: 'move'
		   
		   });
		   
		   
		   
		   console.log('cuantos hay para inicializar droppable=' + $('.imk_droppable').size());
		   
		   $('.imk_droppable').droppable({
		          hoverClass: 'hovered',
		          drop: function(event,ui){
		                    //console.log('si entre');
		                    

		                    //console.log('html=' + $(this).html())
		                    
		                    //Verificamos si se está dropeando el campo en el mismo sitio dónde ya se encuentra
		                    if (this == ui.draggable.parent().get(0)) {
		                    	//console.log("si son iguales");
		                    	//Cómo es el mismo sitio donde ya está, sólo necesitamos reposicionarlo
		                    	//en el borde de la celda.
		                    	ui.draggable.css({
            						top: '0px',
            						left: '0px'
        						});
		                    //verificamos si ya existe otro elemento draggable dentro del objeto
		                    // si no se hace esta verificación se permitiría agregar multiples objetos sobre puestos con otros
		                    } else if ($(this).find('.imk_draggable').length==0) {
		                        //console.log('dentro del ==0')
		                        //Cambiamos el revert para que no se devuelva a su posicion anterior
		                    	ui.draggable.draggable( 'option', 'revert', false );
		                    	
		                    	//Se agrega a este objeto, para que el DOM se modifique.  
		                    	//si no hacemos esto, simplemente jquery le cambia la posición al div, 
		                    	//pero no podríamos saber que está realmente asignado a esta celda.
		                    	ui.draggable.appendTo($(this));
		                    	
		                    	//Cambiamos su posición para que quede alineado con el contenedor.
		                    	//Si no se hace esto, el objeto queda exactamente dónde lo soltó el usuario.
		                    	ui.draggable.css({
            						top: '0px',
            						left: '0px'
        						});

		                    }
		                    
		                    
	                     },
		          out: function(event,ui){
							//Esto hace que el elemento se revierta a su posicion original		                    
		                    ui.draggable.draggable( 'option', 'revert', true );
		                    
	                     },	                     
		   });		   


		}
		
		
		function mostrarOrden() {
			//console.log('cantidad' + $('td.imk_droppable > .imk_draggable').length)
		    
		    var resultado = '';
		    
		    $('td.imk_droppable').each(function (index) {
		    	//console.log('celda=' + index)
		    	//console.log('nombre escogido=' + $(this).text().trim())
		    	
		    	//para obtener el orden extraemos el texto (y lo trimeamos) de los hijos de td.imk_droppable
		    	//esto asume que dónde se ponen los titulos es un TD.
		    	//si se utiliza otro tipo de campo (o es el mismo tipo dónde se muestran inicialmente y se depositan los titulos)
		    	//se debe usar otra clase para poder diferenciarlos, otra clase del tipo "imk_caja_titulo_final" y utilizarla
		    	// en el selector para hacer el each.
		    	
		    	resultado += '' + index + $(this).text().trim() + '\n'
		    
		    });
		    alert('Escogiste:\n' + resultado)
		
		
		}
		

		
		



    </script>

</head>

<body onLoad="inicializar()">


                <div sclass="imk_radicool_titulo"><label>Campos disponibles</label></div>

					
                
				<!--
				************************************
				Inicio de los campos disponibles
				************************************				
				-->

				<div style="height:40px">
					<div class="imk_droppable">
					    <div  class="imk_draggable">
								<label>Nombre</label>
						</div>
					</div>
					<div class="imk_droppable">
						    <div class="imk_draggable">
									<label>Empresa</label>
							</div>
						</div>
						<div class="imk_droppable">						
							<div class="imk_draggable">
									<label>Correo</label>
							</div>					
						</div>
				</div>

				
			
			
			<div style="clear:both;"></div>

				<!--
				************************************
				Inicio de las filas del archivo
				************************************				
				-->

			<div class="imk_radicool_titulo">ARCHIVO</div>
                                

							
			<table>
			    <tr>
			       <td class="imk_droppable"></td>
			       <td class="imk_droppable"></td>
			       <td class="imk_droppable"></td>
			    </tr>
			    <tr>
			       <td class="">Roberto</td>
			       <td class="">Correa</td>
			       <td class="">roberto@correa.com</td>
			    </tr>
			    <tr>
			       <td class="">Pedro</td>
			       <td class="">Perez</td>
			       <td class="">pp@perez.com</td>
			    </tr>
			    <tr>
			       <td class="">Juan</td>
			       <td class="">Alfonso</td>
			       <td class="">alf@onso.com</td>
			    </tr>
			</table>
                                
			<button onClick="mostrarOrden()" >Orden Escogido</button>
                               
</body>

</html>